<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { deleteUser, getPage, User } from '../../../api/user'
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
import DeptTree from './DeptTree.vue'
import dayjs from 'dayjs'
import UserForm from './userForm.vue'

const searchForm = reactive({
  username: '',
  page: 1,
  pageSize: 10
})

const dataList = ref<User[]>([])
const total = ref(0)

const onSearch = () => {
  getPage(searchForm).then(res => {
    dataList.value = res.list
    total.value = res.total
  })
}

const formatter = (row: User, column: TableColumnCtx<User>) => {
  return dayjs(row.createTime * 1000).format('YYYY-MM-DD HH:mm:ss')
}
const refUserForm = ref()

const clickAddBut = () => {
  refUserForm.value.showForAdd()
}
const handleUpdate = (row: User) => {
  refUserForm.value.showForEdit(row.id)
}
const handleDelete = (row: User) => {
  deleteUser(row.id).then(res => {
    onSearch()
  })
}

onMounted(() => {
  onSearch()
})

</script>

<template>
  <UserForm ref="refUserForm" :onSearch="onSearch"></UserForm>
  <el-row>
    <el-col :span="3" class="tree-div">
      <el-card>
        <DeptTree></DeptTree>
      </el-card>
    </el-col>
    <el-col :span="20">
      <el-card class="search-card">
        <el-input v-model="searchForm.username" placeholder="请输入用户名称"/>
        <el-button type="primary" @click="clickAddBut">添加</el-button>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-card>

      <el-card class="body-card">
        <el-table :data="dataList" style="width: 100%">
          <el-table-column label="用户账户" prop="username"/>
          <el-table-column label="用户昵称" prop="nickname"/>
          <el-table-column label="邮箱" prop="email"/>
          <el-table-column label="创建人" prop="creator"/>
          <el-table-column :formatter="formatter" label="创建时间" prop="create_time" width="180"/>
          <el-table-column
              label="账户状态"
              prop="status"
              width="100"
          >
            <template #default="scope">
              <el-tag
                  :type="scope.row.status === 2 ? 'warning' : 'success'"
                  disable-transitions
              >{{ scope.row.status === 2 ? "停用" : "正常" }}
              </el-tag
              >
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template #default="scope">
              <el-button
                  link
                  type="primary"
                  @click="handleUpdate(scope.row)"
              >
                <el-icon>
                  <Edit/>
                </el-icon>
                编辑
              </el-button
              >
              <el-button
                  link
                  type="primary"
                  @click="handleDelete(scope.row)"
              >
                <el-icon>
                  <Edit/>
                </el-icon>
                删除
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :total="total" background layout="total,prev, pager, next"/>
      </el-card>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.search-card {
  margin-left: 20px;
  margin-right: 20px;

  .el-card__body {
    .el-input {
      width: 200px;
      margin-right: 10px;
    }
  }

  margin-bottom: 10px;
}

.body-card {
  margin-left: 20px;
  margin-right: 20px;
}

.tree-div {
  margin-left: 30px;
}
</style>
